<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-input size="small" v-model="roleName" placeholder="部门名称"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-button type="success" size="small" round>
                        <icon class="el-icon-search"/>
                        搜索
                    </el-button>
                    <el-button type="danger" size="small" round @click="openAdd">
                        <icon class="el-icon-plus"/>
                        新增
                    </el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <div style="padding-top: 20px">
            <el-table
                    :data="roleList"
                    stripe
                    size="mini"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="roleRemark"
                        label="角色名称"
                       >
                </el-table-column>
                <el-table-column
                        prop="createBy"
                        label="创建人">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <div slot-scope="scope">
                        <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
                        <el-link  type="primary" :underline="false" icon="el-icon-edit">编辑</el-link>
                        <el-link  type="success" :underline="false" icon="el-icon-s-tools" @click="authConfig(scope.row.id,scope.row.roleRemark)">权限配置</el-link>
                    </div>
                </el-table-column>
            </el-table>
        </div>

        <!--添加-->
        <el-dialog title="添加角色" :visible.sync="dialogAdd" center width="40%">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称">
                    <el-input size="small" v-model="ruleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色备注">
                    <el-input size="small" v-model="ruleForm.roleRemark"></el-input>
                </el-form-item>
                <el-form-item label="菜单权限">
                    <el-tree
                            :accordion="true"
                            :data="newTree"
                            :props="defaultProps"
                            ref="tree"
                            show-checkbox
                            node-key="id"
                    ></el-tree>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitAdd">添加</el-button>
                    <el-button size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--权限配置-->
        <el-dialog center title="权限配置" :visible.sync="authConfigView" :destroy-on-close="true" width="40%" @closed="dataReset">
            <el-form label-width="100px">
                <el-form-item label="角色名称">
                    <el-tag>{{remark}}</el-tag>
                </el-form-item>
                <el-form-item label="权限菜单">
                    <el-tree
                            :accordion="true"
                            :data="newTree"
                            :props="defaultProps"
                            ref="tree2"
                            show-checkbox
                            node-key="id"
                            :default-checked-keys=hasMenuArray
                    ></el-tree>
                </el-form-item>
                <hr>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitAuth">添加</el-button>
                    <el-button size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {addRole, findRoleHasMenuById, getRoleSelector, saveRoleHasMenu} from "../../api/roleApi";

    export default {
        name: "SysRole",
        data(){
            return{
                hasMenuArray:[],//角色拥有的菜单数组,
                authConfigView:false,//权限配置弹出框
                testLog:false,
                dialogAdd:false,
                roleList:[],
                newTree:[],
                remark:'',
                ruleForm:{
                    roleName:'',
                    roleRemark:'',
                    menuArray:[],
                },
                defaultProps: {
                    label: 'menuName',
                    children: 'children',
                },
                authForm:{
                    id:'',
                    roleHasMenuIdArray:[],
                },

            }
        },

        created() {
            this.newTree = this.$store.getters.routes;
            getRoleSelector().then(res => {
                this.roleList = res.data
            }).catch(() =>{

            })
        },

        methods:{
            //提交权限配置
            submitAuth(){
                this.authForm.roleHasMenuIdArray = this.$refs.tree2.getCheckedKeys()
                saveRoleHasMenu(this.authForm).then(res => {
                    if (res.data === 'success'){
                        this.$message.success("配置成功")
                        this.authConfigView = false;
                    }

                }).catch(() => {

                })
            },

            //权限配置
            authConfig(id,remark){
                this.authForm.id = id;
                this.remark = remark;
                findRoleHasMenuById(id).then(res => {
                    this.authConfigView = true;
                    this.hasMenuArray = res.data;
                }).catch(() =>{

                })
            },

            dataReset(){
                this.hasMenuArray = undefined;
            },

            //添加角色
            submitAdd(){
                this.ruleForm.menuArray = this.$refs.tree.getCheckedKeys()
                addRole(this.ruleForm).then(res =>{
                    if (res.data === 'success'){
                        this.$message.success("添加成功")
                        this.dialogAdd = false;
                    }

                }).catch(() =>{

                })
            },

            /**
             * 打开添加框并获取菜单
             */
            openAdd() {
                this.dialogAdd = true;
            },

        }
    }
</script>

<style scoped>

</style>
